<template>
  <div>
    <v-chart class="chart" ref="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'

import { ecExport } from '@/utils'

import { axis } from '../config/axis'

use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

export default {
  name: 'bloodRelation',
  components: {
    VChart
  },
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    },
    xData: {
      type: Array,
      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    data: {
      type: Array,
      default: () => [150, 230, 224, 218, 135, 147, 260]
    },
    show: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    },
    chartType: {
      type: String,
      default: 'line'
    },
    yName: {
      type: String,
      default: '单位：次'
    }
  },
  data() {
    return {}
  },
  computed: {
    util() {
      return this.yName.split('：')[1]
    },
    option() {
      return {
        title: {
          show: this.show,
          text: this.text
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: this.chartType === 'bar' ? 'shadow' : 'line'
          },
          formatter: param => {
            const {axisValueLabel, marker, value} = param[0]
            return `<div>${axisValueLabel}</div>
                    <div>${marker} ${value}${this.util}</div>`
          //   console.log(param, '---param---')
          }
        },
        xAxis: {
          ...axis(),
          data: this.xData,
          boundaryGap: this.chartType !== 'line'
        },
        yAxis: {
          ...axis(),
          name: this.yName,
          type: 'value'
        },
        grid: {
          // x: 0,
          // y: 20
        },
        series: [
          {
            data: this.data,
            type: this.chartType
          }
        ]
      }
    }
  },

  methods: {
    _ecExport(title = '') {
      ecExport(this.$refs.chart, title)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  width: 100%;
  .chart {
    height: 100%;
    width: 100%;
  }
}
</style>